<template>
	<view class="containner">
		<view class="headerbg">
			{{type == 1?'请及时付款':((type == 2)?'拼团成功':'拼团失败')}}
		</view>
		<view class="bodybg"></view>
		<view class="content pdlr20">
			<view class="pdlr20 data">
				<view>{{datalist.buy_min_number}}人成团，
				{{(datalist.buy_min_number - datalist.current_number) <= 0 ?'组团成功':'还差' + (datalist.buy_min_number - datalist.current_number) + '人组团成功'}}
				</view>
				<view class="timer" v-if="timestamp>0">———剩余<u-count-down :timestamp="timestamp"></u-count-down>结束——</view>
				<view class="timer" v-else>———已结束——</view>
				<view class="count">
					<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="0">
						<view id="demo1" class="scroll-view-item_H uni-bg-red" v-for="(item,index) in datalist.groupbuy_join" :key="index">
							<u-avatar :src="item.avatar" :show-level="index==0?true:false"></u-avatar>
							<view class="username">{{item.nickname}}</view>
						</view>
					</scroll-view>
				</view>
				<view class="btns" v-if="datalist">
					<u-button v-if="(datalist.buy_min_number-datalist.groupbuy_join.length) <= 0 ?false:true&type==1" type="success" shape="circle"
					 open-type="share" @click="onShareAppMessage" size="medium">立即邀请好友</u-button>
					<u-button v-if="datalist.sgo_status == 10&type==1" @click="goPay(datalist.sgo_ordersn)" type="success" shape="circle" size="medium">立即支付</u-button>
				</view>
			</view>
			<!-- 地址 -->
			<view class="pdlr20 data address" v-if="datalist">
				<view><u-icon name="map" color="#333333" size="40"></u-icon></view>
				<view class="addressInfo">
					<view class="namephone">收货人    {{datalist.delivery_address.contact_person}}    {{datalist.delivery_address.contact_phone}}</view>
					<view class="addressDetail">{{datalist.delivery_address.province+datalist.delivery_address.detail_address}}</view>
				</view>
			</view>
			<!-- 商品 -->
			<view class="goodsData" v-if="datalist">
				<view class="goods">
					<view class="left">
						<image :src="datalist.groupbuy_details.groupbuy_image[0]" mode="widthFix" style="width: 220rpx;"></image>
					</view>
					<view class="right">
						<view class="name">
							{{datalist.groupbuy_details.goods_name}}
						</view>
						<view class="type">
							{{datalist.buy_min_number}}人团
						</view>
						<view class="price_num">
							<view class="priceBox">
								<span class="title">拼团价￥</span>
								<span class="price">{{datalist.groupbuy_details.groupbuy_price}}</span>
							</view>
							<view class="num">
								x{{datalist.sgo_number}}
							</view>
						</view>
					</view>
				</view>
				<view class="free">
					<view class="title">
						运费
					</view>
					<view class="price">
						{{datalist.sgo_fee}}
					</view>
				</view>
				<view class="total">
					共{{datalist.sgo_number}}件商品 实付：￥{{datalist.sgo_price}}
				</view>
			</view>
			<!-- 订单信息 -->
			<view class="pdlr20 data orderInfo" v-if="datalist">
				<view>订单信息</view>
				<view>订单编号：<text>{{datalist.sgo_ordersn}}</text></view>
				<view>下单时间：<text>{{datalist.sgo_updtime}}</text></view>
				<view>订单备注：<text>{{datalist.sgo_message || '无'}}</text></view>
				<view>支付时间：<text>{{datalist.sgo_paytime||'无'}}</text></view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getorderId
	} from '@/common/group.js'
	import { getGroupbuyPay } from '@/api/user.js'
	export default {
		data() {
			return {
				orderId: 0,
				timestamp: "",
				datalist:"",
				type:""
			};
		},
		onLoad(options) {
			this.orderId = options.id
			this.type=options.type
		},
		mounted() {
			this.init()
		},
		// 分享朋友
		onShareAppMessage(res) {
		    return {
		        title: '哥哥，帮我一把嘛！！',
		        path: '/pages/home/home',
		        imageUrl: this.datalist.groupbuy_details.groupbuy_image[0]
		    };
		},
		methods: {
			init() {
				let that = this
				getorderId(this.orderId).then(res => {
					console.log(222, res.data);
					that.datalist = res.data;
					let date = new Date().getTime()
					this.timestamp = (res.data.sgo_timeout*1000) -date
				})
			},
			handlerCount(){
				
			},
			goPay(no){
				getGroupbuyPay({
					order_no: no
				}).then(res=>{
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: res.data.timeStamp,
						nonceStr: res.data.nonceStr,
						package: res.data.package,
						signType: 'MD5',
						paySign: res.data.paySign,
						success: function(res) {
							// success && success(res.data);
							toast('支付成功');
							setTimeout(function() {
								uni.navigateBack({
									delta: 1
								});
							}, 500);
						},
						fail: function(err) {
							uni.showToast({
								title: '支付失败',
								icon: 'none',
								duration: 2000
							});
							// fail && fail(err.data);
						},
						complete(ress) {
							// complete && complete(ress.data);
						}
					});
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.containner {
		min-height: 100vh;
	}

	.pdlr20 {
		padding: 0 20upx;
	}

	.headerbg {
		position: absolute;
		top: 0;
		z-index: -1;
		height: 200upx;
		width: 100vw;
		background: #fc562f;
		border-radius: 10upx 10upx 0px 0px;
		padding: 0 20upx;
		color: #fff;
	}

	.bodybg {
		min-height: calc(100vh);
		width: 100vw;
		position: absolute;
		top: 200upx;
		z-index: -1;
		background-color: #f2f2f2;
	}

	.content {
		overflow: hidden;
		margin-top: 60upx;

		.data {
			background: #FFFFFF;
			border-radius: 10upx;
			margin-top: 20upx;
			padding: 40upx;
			text-align: center;
		}

		.timer {
			display: flex;
			text-align: center;
			justify-content: center;
		}

		.scroll-view_H {
			white-space: nowrap;
			width: 100%;
		}

		.scroll-view-item_H {
			display: inline-block;
			width: 80rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			margin-right: 20upx;
		}
		.username{
			height: 40upx;
			line-height: 40upx;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		.btns{
			margin-top: 20upx;
		}
	}
	
	.address{
		display: flex;
		text-align: left !important;
		.namephone{
			// line-height: 60upx;
			font-size: 28upx;
			color: #333;
		}
		.addressDetail{
			color: #999;
			font-size: 26upx;
		}
	}
	.goodsData{
		box-sizing: border-box;
		width: 710rpx;
		border-radius: 20rpx;
		background-color: #fff;
		padding: 20rpx;
		.goods{
			padding: 20rpx 0;
			display: flex;
			justify-content: space-between;
			.left{
				width: 220rpx;
				height: 220rpx;
			}
			.right{
				width: 400rpx;
				height: 220rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
			}
			.left .name{
				font-size: 30rpx;
				color: #333333;
			}
			.left .type{
				font-size: 26rpx;
				color: #666666;
			}
			.price_num{
				display: flex;
				justify-content: space-between;
			}
			.price_num .title{
				font-size: 24rpx;
				color: #FA453CFF;
			}
			.price_num .price{
				font-size: 36rpx;
				color: #FA453CFF;
			}
			.price_num .num{
				font-size: 26rpx;
				color: #666666;
			}
		}
		.free{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 0;
			border-top: 1rpx solid #dedede;
			font-size: 28rpx;
			color: #333333;
		}
		.total{
			text-align: right;
			font-size: 30rpx;
			color: #333333;
			padding: 20rpx 0;
			border-top: 1rpx solid #dedede;
		}
	}
	
	.orderInfo{
		font-size: 28upx;
		color: #333;
		text-align: left !important;
		>view{
			margin-bottom: 15upx;
			>text{
				color: #999999 !important;
			}
		}
	}
</style>